import {FC, useEffect, useState} from "react";
import {BookConfig, getRecommendBookListById} from "@/apis/recommend";
import {ApiConstants} from "@/apis/constants";
import {Book} from "@/pages/index/components/Book";


interface Props {
    bookId: string // 标签列表
}

export const BooksRecommend: FC<Props> = (props) => {
    const {bookId} = props
    const [bookList, setBookList] = useState<BookConfig[]>()
    useEffect(() => {
        async function loadData() {
            const {code, data} = await getRecommendBookListById(bookId, 6)
            if (code === ApiConstants.SUCCESS) {
                setBookList(data)
            }
        }

        loadData().then()
    }, [bookId])

    return (
        <>
            <h2 style={{paddingLeft:"20px",textAlign:"left"}}>猜你喜欢</h2>
            <div className="info_card" style={{marginTop:"20px",flexWrap:"wrap"}}>
                {
                    bookList?.map(item => <Book key={item.id} {...item}/>)
                }
            </div>
        </>

    )
}
